<template>
  <el-card shadow="hover">
    <el-row>
      <el-col :span="14" style="height: 100%;" @click.native="showDetail">
        <el-row>
          <el-col :span="24">
            <div style="display: flex; height: 30px; align-items: center;">
              <strong>{{ flightData.flightInfo.flightNumber }}</strong>
              <span style="padding: 0px 10px;">|</span>
              <img :src="flightCompanyFormatter(flightData.flightInfo.flightNumber)" style="height: 16px;"/>
              <span style="font-size: 14px; color: #909399; margin-left: 4px;">{{aircraftModelFormatter(flightData.flightInfo.aircraftModel)}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="6">
            <div style="text-align: center;">
              <div class="time">{{ flightData.flightSchedule.startTime.substr(11, 5) }}</div>
              <div>{{ flightData.startStationDisplay }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="text-align: center;">
              <div class="zls-flg-dir"><i></i></div>
              <div style="font-size: 14px; padding: 6px;">
                <span>总时长:</span>
                <span>{{ timeFormatter(flightData.flightSchedule.duration) }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="text-align: center;">
              <div class="time">{{ flightData.flightSchedule.endTime.substr(11, 5) }}</div>
              <div>{{ flightData.endStationDisplay }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="text-align: center;">
              <div>
                航班详情
              </div>
              <div>
                <i v-if="isShow" class="el-icon-arrow-down"></i>
                <i v-else class="el-icon-arrow-up"></i>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10" style="height: 100%;">
        <div class="flight-class-price-box">
          <div style="width: 100%; cursor: pointer;" @click="handleSelected('economy')">
            <div class="flight-class-title flight-class-economy-title">经济舱</div>
            <div class="flight-class-price-box-economy" style="border: 1px solid #bcc9d7;">
              <div class="price-box"><span>¥</span><span class="number" :style="select == 'economy' ? 'color: red;': 'color: black;'">{{ parseInt(flightData.flightSchedule.economyPrice) }}</span><span>起</span></div>
              <div class="seat-count-box"><span>剩余座位数：</span><span class="number">{{ parseInt(flightData.flightStock.economySeatRemainderCount) }}</span></div>
            </div>
          </div>
          <div style="width: 100%; cursor: pointer;" @click="handleSelected('business')">
            <div class="flight-class-title flight-class-business-title">商务舱</div>
            <div class="flight-class-price-box-business">
              <div class="price-box"><span>¥</span><span class="number" :style="select == 'business' ? 'color: red;': 'color: black;'">{{ parseInt(flightData.flightSchedule.businessPrice) }}</span><span>起</span></div>
              <div class="seat-count-box"><span>剩余座位数：</span><span class="number">{{ parseInt(flightData.flightStock.businessSeatRemainderCount) }}</span></div>
            </div>
          </div>
          <div style="width: 100%; cursor: pointer;" @click="handleSelected('head')">
            <div class="flight-class-title flight-class-head-title">头等舱</div>
            <div class="flight-class-price-box-head">
              <div class="price-box"><span>¥</span><span class="number" :style="select == 'head' ? 'color: red;': 'color: black;'">{{ parseInt(flightData.flightSchedule.headPrice) }}</span><span>起</span></div>
              <div class="seat-count-box"><span>剩余座位数：</span><span class="number">{{ parseInt(flightData.flightStock.headSeatRemainderCount) }}</span></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 航班时间线 -->
    <el-collapse-transition>
      <el-row v-if="isShow && flightData.flightType == 'A'" style="padding: 20px 0;">
        <el-col :span="12">
          <el-timeline>
            <el-timeline-item
                type="primary"
                :timestamp="'中国东方航空' + flightData.flightNumber" placement="top">
            </el-timeline-item>
            <el-timeline-item
                type="primary"
                :timestamp="flightData.flightNumber">
              <el-row type="flex" justify="center" align="middle">
                <el-col :span="10">
                  <div style="text-align: center;">
                    <p>{{ parseTime(flightData.flightSchedule.startTime) }}</p>
                    <p>{{ flightData.startStationDisplay }}</p>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div style="text-align: center;">
                    <p class="zls-flg-dir"><i></i></p>
                    <p>
                      <span>总时长:</span>
                      <span>{{ timeFormatter(flightData.flightSchedule.duration) }}</span>
                    </p>
                  </div>
                </el-col>
                <el-col :span="10">
                  <div style="text-align: center;">
                    <p>{{ parseTime(flightData.flightSchedule.endTime) }}</p>
                    <p>{{ flightData.endStationDisplay }}</p>
                  </div>
                </el-col>
              </el-row>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
    </el-collapse-transition>
  </el-card>
</template>
<script>

import muLogo from '@/assets/images/logo/中国东方航空.png'
import huLogo from '@/assets/images/logo/海南航空.png'
import czLogo from '@/assets/images/logo/中国南方航空.jpg'

export default {
  name: "flightList",
  dicts: ['flight_type', 'aircraft_model'],
  data() {
    return {
      select: '',
      isShow: false,
      aircraftModelDisplay: "",
      muLogo: muLogo,
      huLogo: huLogo,
      czLogo: czLogo
    }
  },
  created() {
  },
  props: {
    flightData: {
      type: Object,
      default() {
        return {};
      },
    },
    level: {
      type: String
    }
  },
  methods: {
    // 航空公司格式化器
    flightCompanyFormatter(val) {
      if (val.search('CZ') > -1) {
        return this.czLogo
      } else if (val.search('HU') > -1) {
        return this.huLogo
      } else if (val.search('MU') > -1) {
        return this.muLogo
      }
    },
    // 时长格式化器
    timeFormatter(value) {
      return parseInt(value / 60) > 0
          ? parseInt(value / 60) + "h" + (value % 60) + "m"
          : value % 60 + "m"
    },
    // 机型格式化器
    aircraftModelFormatter(value) {
      return this.selectDictLabel(this.dict.type.aircraft_model, value)
    },
    showDetail() {
      this.isShow = !this.isShow;
    },
    // 选定航班事件
    handleSelected(flightClass) {
      this.select = flightClass
      this.$emit('select-flight', this.level, this.flightData.dataId)
    },
  },
};
</script>

<style lang="scss" scoped>

.time {
  font-size: 20px;
}

// 始发站终点站箭头 开始
.zls-flg-dir {
  border-bottom: 2px solid #bcc9d7;
  height: 4px;
  position: relative;
  margin-top: 10px;
}

.zls-flg-dir i {
  position: absolute;
  right: -3px;
  top: -2px;
  width: 0;
  height: 0;
  border-left: 12px solid #bcc9d7;
  border-top: 6px solid transparent;
}

// 始发站终点站箭头 结束

//舱位价格 开始
.flight-class-price-box {
  width: 100%;
  display: flex;
  text-align: center;
}

.flight-class-price-box-economy {
  border: 1px solid #bcc9d7;
}

.flight-class-price-box-business {
  border-bottom: 1px solid #bcc9d7;
  border-top: 1px solid #bcc9d7;
}

.flight-class-price-box-head {
  border: 1px solid #bcc9d7;
}

.flight-class-title {
  color: #fff;
  padding: 8px;
  text-align: center;
}

.flight-class-economy-title {
  background: #223b61;
}

.flight-class-business-title {
  background: #1f5cb6;
}

.flight-class-head-title {
  background: #9f8f5d;
}

.price-box {
  padding: 14px;

  .number {
    font-weight: bold;
  }
}

.seat-count-box {
  span {
    font-size: 12px;
  }

  .number {
    font-weight: bold;
  }
}

//舱位价格 结束

</style>
